<template>
  <view class="search_page">
    <!-- <u-navbar
      bgColor="#f8f9fa"
      :autoBack="true"
      leftIconSize="35rpx"
      placeholder
    >
      <template #center>
        <view class="search_center">
          <SearchVue
            bgColor="#fff"
            placeholder="请输入搜索内容"
            showAction
            actionText="取消"
          ></SearchVue>
        </view>
      </template>
    </u-navbar> -->
    <view class="search_view">
      <u-icon name="arrow-left" bold size="40" @click="onToBack"></u-icon>
      <view class="search_box">
        <SearchVue
          bgColor="#fff"
          placeholder="请输入搜索内容"
          showAction
          actionText="取消"
          @custom="onCustom"
        >
        </SearchVue>
      </view>
    </view>
    <view class="goods_view">
      <scroll-view scroll-y style="height: 100%; width: 100%">
        <view class="goods_list">
          <GoodsItem @click="handGoodDetail({})" v-for="item in 10"></GoodsItem>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import SearchVue from "@/component/Search/index.vue";
import GoodsItem from "../component/GoodsItem.vue";

// 点击商品详情
function handGoodDetail() {
  uni.navigateTo({ url: "/pages/good_detail/index" });
}

function onToBack() {
  uni.navigateBack({ delta: 1 });
}
function onCustom() {
  console.log("取消");
  // uni.reLaunch({ url: "/pages/home/index" });
}
</script>

<style lang="scss" scoped>
.search_page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .goods_view {
    flex: 1 0 auto;
    height: 0;
    overflow: hidden;
    .goods_list {
      padding: 0 30rpx;
    }
  }
  .search_view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15rpx 20rpx;
    .search_box {
      flex: 1;
      padding: 8rpx auto;
    }
    .cancel {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
    }
  }
}
</style>
